<template>
  <Navbar>
    <!-- <template v-slot:left></template> -->
    <template v-slot:center>商品分类</template>
  </Navbar>
  <!-- 布局分为 上部排序栏 左边菜单和右边商品内容 -->
  <div id="main-box">
    <div class="order-tab">
      <van-tabs v-model:active="tabActice" @click="tabClick">
        <van-tab title="销量排序"></van-tab>
        <van-tab title="价格排序"></van-tab>
        <van-tab title="评分排序"></van-tab>
      </van-tabs>
    </div>
    <van-sidebar v-model="active" class="left-menu">
      <van-collapse v-model="activeName" accordion>
        <van-collapse-item
          v-for="item in categories"
          :title="item.name"
          :name="item.name"
          :key="item.id"
        >
          <van-sidebar-item
            v-for="child in item.children"
            :title="child.name"
            :key="child.id"
            @click="siderClick(child.id)"
          />
        </van-collapse-item>
      </van-collapse>
    </van-sidebar>
    <div class="goods-list">
      <div class="content">
        <van-card
          v-for="item in finalGoods"
          @click="itemClick(item.id)"
          :key="item.id"
          :num="item.comments_count"
          :tag="item.comments_count > 0 ? '流行' : '标签'"
          :price="item.price"
          :title="item.title"
          :thumb="item.cover_url"
          origin-price="10.00"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  Sidebar,
  SidebarItem,
  Collapse,
  CollapseItem,
  Tab,
  Tabs,
  Card,
} from "vant";
import { ref, onMounted, reactive, computed } from "vue";
import { useRouter } from "vue-router";
import Navbar from "@/components/common/navbar/NavBar.vue";
import { getCategory, getCategoryGoods } from "@/network/category";

export default {
  name: "Category",
  setup() {
    // router的定义必须放在点击方法外面，否则会报错
    const router = useRouter();
    let active = ref(0);
    let categories = ref([]);
    let activeName = ref(1);
    let tabActice = ref(0);
    let currentOrder = ref("sales");
    let currentSiderId = ref(0);

    // 定义数据模型
    const goods = reactive({
      sales: { page: 1, list: [] },
      price: { page: 1, list: [] },
      comments_count: { page: 1, list: [] },
    });

    // 通过计算属性把请求得到的值进行计算
    const finalGoods = computed(() => {
      return goods[currentOrder.value].list;
    });

    const requestData = () => {
      // 通过请求接口把数据都初始化到数据模型中
      getCategoryGoods("sales", currentSiderId).then((res) => {
        goods.sales.list = res.data.goods.data;
      });
      getCategoryGoods("price", currentSiderId).then((res) => {
        goods.price.list = res.data.goods.data;
      });
      getCategoryGoods("comments_count", currentSiderId.value).then((res) => {
        goods.comments_count.list = res.data.goods.data;
      });
    };

    onMounted(() => {
      getCategory().then((res) => {
        categories.value = res.data.categories;
      });

      requestData();
    });

    // 排序选项卡点击
    const tabClick = (id) => {
      let orders = ["sales", "price", "comments_count"];
      currentOrder.value = orders[id];

      getCategoryGoods(currentOrder.value, currentSiderId.value).then((res) => {
        goods[currentOrder.value].list = res.data.goods.data;
      });
    };

    // 侧边菜单栏点击
    const siderClick = (id) => {
      currentSiderId.value = id;
      getCategoryGoods(currentOrder.value, currentSiderId.value).then((res) => {
        goods[currentOrder.value].list = res.data.goods.data;
      });
    };
    // 详情跳转
    const itemClick = (id) => {
      router.push({ path: "/detail", query: { id } });
    };
    return {
      active,
      categories,
      activeName,
      tabActice,
      currentOrder,
      currentSiderId,
      tabClick,
      siderClick,
      finalGoods,
      itemClick,
    };
  },
  components: {
    Navbar,
    [Sidebar.name]: Sidebar,
    [SidebarItem.name]: SidebarItem,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Card.name]: Card,
  },
};
</script>

<style lang='less'>
#main-box {
  margin-top: 45px;
  display: flex;
  .order-tab {
    flex: 1;
    float: right;
    height: 50px;
    z-index: 9;
    position: fixed;
    top: 45px;
    right: 0;
    left: 130px;
  }

  .left-menu {
    position: fixed;
    top: 95px;
    left: 0;
    width: 130px;
  }

  .goods-list {
    flex: 1;
    position: absolute;
    top: 100px;
    left: 130px;
    right: 0;
    height: 100vh;
    padding: 10px;
    text-align: left !important;
    .content {
    }
  }
}

.van-card__thumb {
  width: 68px !important;
}
</style>
